import React, { useState } from 'react';
import axios from 'axios';

function Upload() {
    const [file, setFile] = useState(null);
    const [uploading, setUploading] = useState(false);
    const [uploaded, setUploaded] = useState(false);

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        setUploading(true);
        const formData = new FormData();
        formData.append('file', file);
        axios.post('http://localhost:3001/upload', formData).then(() => {
            setUploaded(true);
            setUploading(false);
        });
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" onChange={handleFileChange} />
            <button type="submit" disabled={!file || uploading}>
                {uploading ? '上传中...' : '上传'}
            </button>
            <div>{uploaded && '文件已上传'}</div>
        </form>
    );
}

export default Upload;